$(document).ready(function () {
  $.ajax({
    url: "data.php",
    method: "GET",
    success: function (data) {
      console.log(data);
      var weeks = [];
      var users = [];

      for (var i in data) {
        weeks.push("Week No. " + data[i][1]);
        users.push(Number(data[i][0]));
      }

      var chartdata = {
        labels: weeks,
        datasets: [
          {
            label: "Registered Users",
            backgroundColor: "#4E5D6C",
            borderColor: "#4E5D6C",
            hoverBackgroundColor: "#DC143C",
            hoverBorderColor: "#DC143C",
            data: users,
          },
        ],
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: "bar",
        data: chartdata,
        options: {
          legend: {
            display: true,
          },
          tooltips: {
            enabled: true,
          },
          scales: {
            xAxes: [
              {
                scaleLabel: {
                  display: "true",
                  fontSize: 16,
                  labelString: "Number of Weeks",
                  fontStyle: "bold",
                },
              },
            ],yAxes: [
              {
                scaleLabel: {
                  display: "true",
                  fontSize: 16,
                  labelString: "Number of Users Registered",
                  fontStyle: "bold",
                },
                ticks: {
                  beginAtZero: true,
                  userCallback: function (label, index, labels) {
                    // when the floored value is the same as the value we have a whole number
                    if (Math.floor(label) === label) {
                      return label;
                    }
                  },
                },
              },
            ],
          },
          plugins: {
            datalabels: {
              display: true,
              color: "white",
              align: "center",
              anchor: "center",
            },
          },
        },
      });
    },

    error: function (data) {
      console.log(data);
    },
  });
});
